import React from 'react';
import './mian.css';

import { Menu, Table } from 'antd';

import Api from '../../config';
import { observer, inject } from 'mobx-react'

import Lyric from 'lyric-parser';

const columns = [{
    title: '歌曲',
    dataIndex: 'SongName',
    key: 'Scid',
    width: '30%',
    render: (text, record) => (
        <div className="song-name">
            <span><i className="iconfont icon-tubiao"></i>{record.SongName}</span>
            {/* <div className="song-other">
                <span><i className="iconfont icon-xiangsi"></i>听相似歌曲</span>
                <span><i className="iconfont icon-bofang"></i>看现场翻唱</span>
            </div> */}
        </div>

    )
}, {
    title: '歌手',
    dataIndex: 'SingerName',
    key: 'SingerId',
    width: '20%'
}, {
    title: '专辑',
    dataIndex: 'AlbumName',
    key: 'AlbumID',
    width: "20%"
}, {
    title: "",
    dataIndex: "Action",
    key: "action",
    render: (text, record) => (
        <div className="song-actions">
            <span><a href="#" className="xiai"><i className="iconfont icon-xiai"></i></a></span>
            <ul>
                <li><a href=""><i className="iconfont icon-tianjia"></i></a></li>
                <li><a href=""><i className="iconfont icon-xiazai"></i></a></li>
                <li><a href=""><i className="iconfont icon-shanchu"></i></a></li>
                <li><a href=""><i className="iconfont icon-phone"></i></a></li>
                <li><a href="" className="nolose">无损</a></li>
            </ul>
        </div>
    )
}];

@inject("MainStore")
@observer
class Main extends React.Component {

    componentDidMount() {
        const { MainStore } = this.props
        //默认加载音乐列表，并选中播放列表中第一条数据
        Api.get(Api.searchUrl, {
            keyword: "",
            iscorrection: 1
        }).then(res => {
            if (res.lists !== null && res.lists.length > 0) {
                MainStore.init(res);
                Api.get(Api.detailUrl, {
                    r: "play/getdata",
                    hash: res.lists[0].FileHash,
                    album_id: res.lists[0].AlbumID
                }).then(res => {
                    MainStore.selectMusic(res)
                })
            }
        })
    }

    /* 获取歌词列表 */
    getLyricList = (lyrics) => {
        if (lyrics && lyrics.length > 0) {
            let lyric = new Lyric(lyrics, ({ lineNum, txt }) => {

            })
            return lyric.lines;
        }


    }

    handlerSelectChange = (selectedRowKeys, selectedRows) => {
        this.props.MainStore.selectRow(selectedRowKeys);
    }

    handlerOnRow = (record, index) => {
        return {
            onMouseEnter: () => {
                this.refs.mainRight.getElementsByClassName("song-actions")[index].getElementsByTagName("ul")[0].style.display = "flex";
            },
            onMouseLeave: () => {
                this.refs.mainRight.getElementsByClassName("song-actions")[index].getElementsByTagName("ul")[0].style.display = "none";
            },
            onDoubleClick: () => {
                Api.get(Api.detailUrl, {
                    r: "play/getdata",
                    hash: record.FileHash,
                    album_id: record.AlbumID
                }).then(res => {
                    this.props.MainStore.selectMusic(res)
                })
            }
        }
    }
    render() {
        const { lists, music, selectedRowKeys, nowTime } = this.props.MainStore;
        const pagination = {
            defaultCurrent: 1,
            defaultPageSize: 50,
            hideOnSinglePage: true
        };

        const rowSelection = {
            selectedRowKeys: selectedRowKeys,
            onChange: this.handlerSelectChange
        }

        return (
            <div className="components-main">
                <div className="main-left">
                    <Menu defaultSelectedKeys={['list']} mode="inline">
                        <Menu.Item key="list">
                            <i className="iconfont icon-caidan"></i>
                            <span>歌曲列表</span>
                        </Menu.Item>
                        <Menu.Item key="record">
                            <i className="iconfont icon-shijian"></i>
                            <span>播放记录</span>
                        </Menu.Item>
                        <Menu.Item key="always">
                            <i className="iconfont icon-tubiao"></i>
                            <span>我最常听</span>
                        </Menu.Item>
                        <Menu.Item key="history">
                            <i className="iconfont icon-xiazai"></i>
                            <span>下载历史</span>
                        </Menu.Item>
                        <Menu.Item key="buy">
                            <i className="iconfont icon-goumai"></i>
                            <span>已购音乐</span>
                        </Menu.Item>
                    </Menu>
                </div>
                <div ref="mainRight" className="main-right">
                    <div className="main-lists">
                        <Table dataSource={lists} columns={columns} rowKey="Scid" onRow={this.handlerOnRow} pagination={pagination} rowSelection={rowSelection}></Table>
                    </div>
                    <div className="main-footer">
                        <ul>
                            <li><span><i className="iconfont icon-xiai"></i>喜欢</span></li>
                            <li><span><i className="iconfont icon-tianjia"></i>加到歌单</span></li>
                            <li><span><i className="iconfont icon-xiazai"></i>批量下载</span></li>
                            <li><span><i className="iconfont icon-shanchu"></i>删除</span></li>
                            <li><span><i className="iconfont icon-delete"></i>清空</span></li>
                        </ul>
                        <div className="footer-song-num">共20首歌曲</div>
                    </div>
                </div>
                <div className="main-lyrics">
                    <img src={music.img} title={music.album_name} alt={music.album_name} style={{ width: 150, height: 150, margin: "40px 0" }} />
                    <ul ref="lyricBox" className="lyrics-list">
                        {
                            //   将歌词拆分成数组，然后遍历数组通过判断当前时间大于或等于歌词开始时间并小于下一句开始时间，为正在播放歌词
                            this.getLyricList(music.lyrics) ? this.getLyricList(music.lyrics).map((item, index, array) => {
                                let now = Math.floor(nowTime.toFixed(2) * 1000)
                                let nextIndex = index + 1;
                                if (index === 0) {
                                    this.refs.lyricBox.scrollTop = 0;
                                }
                                if (nextIndex < array.length) {
                                    if (item.time <= now && now <= array[nextIndex].time) {
                                        //获取正在播放的歌词距离顶部的距离(注意初始并不是0，而是以main-lyrics为基准，所以初始应该是230=img高度+margin)
                                        let activeTop = this.refs.lyricBox.getElementsByTagName("li")[index] ? this.refs.lyricBox.getElementsByTagName("li")[index].offsetTop : 230;
                                        //获取歌词盒子的高度
                                        let lyricBoxHeight = this.refs.lyricBox.clientHeight;
                                        //获取歌词盒子距离顶部的距离
                                        let lyricBoxOffsetTop = this.refs.lyricBox.offsetTop;//230
                                        if (activeTop > (lyricBoxHeight / 2 + lyricBoxOffsetTop)) {
                                            this.refs.lyricBox.scrollTop = activeTop - (lyricBoxHeight / 2 + lyricBoxOffsetTop);
                                        }
                                        return <li key={item.time + "_" + index} className="lyric-active">{item.txt}</li>
                                    } else if (item.time < now) {
                                        return <li key={item.time + "_" + index} className="lyric-has-active">{item.txt}</li>
                                    } else {
                                        return <li key={item.time + "_" + index} >{item.txt}</li>
                                    }
                                } else {
                                    //最后一句则判断当前时间是否大于最后一句的开始时间
                                    if (item.time < now) {
                                        return <li key={item.time + "_" + index} className="lyric-active">{item.txt}</li>
                                    } else {
                                        return <li key={item.time + "_" + index}>{item.txt}</li>
                                    }
                                }
                            }) : "正在加载..."
                        }
                    </ul>
                </div>
            </div>
        )
    }
}

export default Main;